<template>
	<view class="rent-car-container">
		<!-- 绿色背景区域 -->
		<view class="green-banner">
			<!-- 背景图片 -->
			<image class="banner-bg" src="https://app-1306761403.cos.accelerate.myqcloud.com/a36a601e-b3ce-43d3-830a-d43b4226ab32.png" mode="aspectFill"></image>
			
			<!-- 导航区域（带吸顶效果） -->
			<view class="nav-container" :class="{ 'nav-container-fixed': isNavFixed }">
				<!-- 空白布局区域 -->
				<view class="banner-spacer"></view>
				
				<!-- 导航栏 -->
				<view class="nav-bar">
					<view class="back-icon-wrapper" @click="goBack">
					<image class="back-icon" :src="isNavFixed ? '/static/images/icon_back@3x.png' : '/static/images/icon_back_light@3x.png'" mode="aspectFit"></image>
					</view>
					<image class="title-icon" :src="isNavFixed ? '/static/images/利行租买车.png' : '/static/images/利行租买车白.png'" mode="aspectFit"></image>
					<view class="seperator-line"></view>
					<image class="tagline-icon" :src="isNavFixed ? '/static/images/无套路 有保障@3x.png' : '/static/images/无套路有保障白.png'" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 第二行：官方平台有保障 -->
			<view class="banner-text-line-1">
				<text class="banner-text-large">官方平台有保障</text>
			</view>
			
			<!-- 第三行：租车更安心！ -->
			<view class="banner-text-line-2">
				<text class="banner-text-large">租车更安心！</text>
			</view>
			
			<!-- 右侧盾牌图片 -->
			<image class="shield-icon" src="https://app-1306761403.cos.accelerate.myqcloud.com/lx-images/rent_img_sheid@3x.png" mode="aspectFit"></image>
		</view>
		
		<!-- 右下角悬浮窗 -->
		<!-- <image class="floating-avatar" src="https://app-1306761403.cos.accelerate.myqcloud.com/lx-images/img_avatar@3x.png" mode="aspectFit" @click="showConsultPopup"></image> -->
		<movable-area class="movableArea">
			<movable-view class="movableView" @click="showConsultPopup" direction="all" x="0rpx" y="600rpx">
				<image src="https://app-1306761403.cos.accelerate.myqcloud.com/lx-images/img_avatar@3x.png" />
			</movable-view>
		</movable-area>
		
		<!-- 租车卡片区域 -->
		<view class="car-cards-section">
			<!-- 吸顶区域：标题和筛选栏 -->
			<view class="sticky-header" :class="{ 'sticky-header-fixed': isHeaderFixed }">
				<text class="section-title">租车</text>
				
				<!-- 筛选栏 -->
				<view class="filter-bar">
					<view class="filter-item" @click="togglePriceDropdown">
						<text class="filter-text" :class="{ 'active-filter': showPriceDropdown || selectedPrice }">{{ getPriceSortText() }}</text>
						<image class="sort-icon" src="/static/images/sort-icon.png" mode="aspectFit"></image>
						<!-- <text class="filter-arrow">▼</text> -->
					</view>
					<view class="filter-item" @click="toggleBrandDropdown">
						<text class="filter-text" :class="{ 'active-filter': showBrandDropdown || selectedBrands.length > 0 }">{{ getBrandText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
					<view class="filter-item" @click="toggleEnergyDropdown">
						<text class="filter-text" :class="{ 'active-filter': showEnergyDropdown || selectedEnergy }">{{ getEnergyText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
					<view class="filter-item" @click="togglePriceRangeDropdown">
						<text class="filter-text" :class="{ 'active-filter': showPriceRangeDropdown || selectedPriceRanges.length > 0 }">{{ getPriceRangeText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
				</view>
				
				<!-- 价格排序选项 -->
				<view class="price-options" v-if="showPriceDropdown">
					<view 
						class="price-option" 
						:class="{ 'active': selectedPrice === 'lowest' }"
						@click="selectPrice('lowest')"
					>价格最低</view>
					<view 
						class="price-option" 
						:class="{ 'active': selectedPrice === 'highest' }"
						@click="selectPrice('highest')"
					>价格最高</view>
				</view>
				
				<!-- 能源选择选项 -->
				<view class="energy-options" v-if="showEnergyDropdown">
					<view 
						class="energy-option" 
						:class="{ 'active': selectedEnergy === null }"
						@click="selectEnergy(null)"
					>不限</view>
					<view 
						class="energy-option" 
						:class="{ 'active': selectedEnergy === 'electric' }"
						@click="selectEnergy('electric')"
					>纯电</view>
					<view 
						class="energy-option" 
						:class="{ 'active': selectedEnergy === 'gasoline' }"
						@click="selectEnergy('gasoline')"
					>油车</view>
					<view 
						class="energy-option" 
						:class="{ 'active': selectedEnergy === 'hybrid' }"
						@click="selectEnergy('hybrid')"
					>混动</view>
				</view>
				
				<!-- 价格区间选择选项 -->
				<view class="price-range-options" v-if="showPriceRangeDropdown">
					<view class="price-range-grid">
						<view 
							v-for="(range, index) in priceRangeList" 
							:key="range.id"
							class="price-range-item"
							:class="{ 'price-range-selected': selectedPriceRanges.includes(range.id) }"
							@click="selectPriceRange(range.id)"
						>
							<text class="price-range-name">{{ range.name }}</text>
						</view>
						<!-- 如果是奇数个，添加空白元素 -->
						<view v-if="priceRangeList.length % 2 === 1" class="price-range-item price-range-empty"></view>
					</view>
					
					<!-- 底部按钮 -->
					<view class="price-range-buttons">
						<view class="reset-btn" @click="resetPriceRanges">重置</view>
						<view class="confirm-btn" @click="confirmPriceRanges">
							确定{{ selectedPriceRanges.length > 0 ? `(${selectedPriceRanges.length})` : '' }}
						</view>
					</view>
				</view>
				
				<!-- 品牌选择选项 -->
				<view class="brand-options" v-if="showBrandDropdown">
					<view class="brand-grid">
						<view 
							v-for="(brand, index) in brandList" 
							:key="brand.id"
							class="brand-item"
							:class="{ 'brand-selected': selectedBrands.includes(brand.id) }"
							@click="toggleBrand(brand.id)"
						>
							<image 
								v-if="brand.image" 
								:src="brand.image" 
								class="brand-image" 
								mode="aspectFit"
							></image>
							<view v-else class="brand-image-placeholder"></view>
							<text class="brand-name">{{ brand.name }}</text>
							<image 
								v-if="selectedBrands.includes(brand.id)" 
								class="brand-selected-icon" 
								src="/static/images/rent_icon_brand_selected@3x.png" 
								mode="aspectFit"
							></image>
						</view>
						<!-- 如果是奇数个，添加空白元素 -->
						<view v-if="brandList.length % 2 === 1" class="brand-item brand-empty"></view>
					</view>
					
					<!-- 底部按钮 -->
					<view class="brand-buttons">
						<view class="reset-btn" @click="resetBrands">重置</view>
						<view class="confirm-btn" @click="confirmBrands">
							确定{{ selectedBrands.length > 0 ? `(${selectedBrands.length})` : '' }}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 租车卡片列表 -->
			<view class="car-cards-list" :class="{ 'car-cards-masked': showPriceDropdown || showBrandDropdown || showEnergyDropdown || showPriceRangeDropdown }" @click="(showPriceDropdown || showBrandDropdown || showEnergyDropdown || showPriceRangeDropdown) ? (showPriceDropdown ? togglePriceDropdown() : showBrandDropdown ? toggleBrandDropdown() : showEnergyDropdown ? toggleEnergyDropdown() : togglePriceRangeDropdown()) : null">
				<view 
					v-for="car in carList" 
					:key="car.id" 
					class="car-card"
					@click="goToCarRentalPlan(car)"
				>
					<!-- 第一行：图片和车辆信息 -->
					<view class="car-info-row">
						<!-- 左侧图片 -->
						<view class="car-image-container">
							<image 
								v-if="car.image" 
								:src="car.image" 
								class="car-image" 
								mode="aspectFill"
								@click.stop="previewImage(car.image)"
							></image>
							<view v-else class="car-image-placeholder">
								<text class="placeholder-text">暂无图片</text>
							</view>
						</view>
						
						<!-- 右侧车辆信息 -->
						<view class="car-details">
							<!-- 第一行：车辆名称 -->
							<text class="car-name">{{ car.name }}</text>
							
							<!-- 第二行：型号 -->
							<text class="car-model">{{ car.model }}</text>
							
							<!-- 第三行：数据展示 -->
							<text class="car-specs">{{ car.specs }}</text>
						</view>
					</view>
					
					<!-- 分割线 -->
					<view class="divider"></view>
					
					<!-- 第二行：价格和商家信息 -->
					<view class="car-price-row">
						<!-- 左侧价格 -->
						<text class="car-price">{{ car.price }}元/月起</text>
						
						<!-- 右侧商家信息 -->
						<text class="merchant-info">{{ car.merchantCount }}个商家在售 ></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 咨询弹框 -->
		<uni-popup ref="consultPopup" type="bottom" :mask-click="true" :z-index="2000" @maskClick="closeConsultPopup">
			<view class="consult-modal">
				<!-- 第一行：顾问信息 -->
				<view class="consult-header">
					<view class="consult-info">
						<text class="consult-title">利行租车顾问为您服务</text>
						<view class="service-features">
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">1对1答疑</text>
					</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">车型推荐</text>
					</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">优惠咨询</text>
				</view>
			</view>
		</view>
					<image class="consult-avatar" src="https://app-1306761403.cos.accelerate.myqcloud.com/06d400f0-3875-43a6-b8f9-3664a0e45f6b.png" mode="aspectFit"></image>
				</view>
				
				<!-- 第二行：输入卡片 -->
				<view class="consult-form-card">
					<!-- 手机号输入 -->
					<view class="phone-input-row">
						<text class="input-label">您的手机号</text>
						<view class="input-wrapper">
							<input class="phone-input" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
							<uni-icons v-if="phoneNumber" type="closeempty" size="20" color="#999" @click="clearPhoneNumber"></uni-icons>
						</view>
					</view>
					
					<!-- 隐私说明 -->
					<text class="privacy-text">
						为了您的信息安全，手机号将以虚拟号的形式给到管家，详细规则查看
						<text class="privacy-link">《电话销售说明》</text>
					</text>
					
					<!-- 立即咨询按钮 -->
					<view class="consult-submit-button" @click="submitConsult">
						<text class="submit-button-text">立即咨询</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getCarInfoList, getBrandList, addPotentialClient } from '@/api/carInfo.js';

export default {
	name: 'RentCar',
	data() {
		return {
			isNavFixed: false,
			isHeaderFixed: false,
			showPriceDropdown: false,
			selectedPrice: null,
			showBrandDropdown: false,
			selectedBrands: [],
			showEnergyDropdown: false,
			selectedEnergy: null,
			showPriceRangeDropdown: false,
			selectedPriceRanges: [],
			priceRangeList: [
				{ id: 1, name: '3000以下' },
				{ id: 2, name: '3000-3500' },
				{ id: 3, name: '3500-4000' },
				{ id: 4, name: '4000以上' }
			],
			brandList: [
				{ id: 1, name: '比亚迪', image: '/static/images/pic_logo@3x.png' },
				{ id: 2, name: '别克', image: '/static/images/pic_logo@3x.png' },
				{ id: 3, name: '丰田', image: '/static/images/pic_logo@3x.png' },
				{ id: 4, name: '荣威', image: '/static/images/pic_logo@3x.png' },
				{ id: 5, name: '吉利', image: '/static/images/pic_logo@3x.png' },
				{ id: 6, name: '北汽', image: '/static/images/pic_logo@3x.png' },
				{ id: 7, name: '广汽', image: '/static/images/pic_logo@3x.png' },
				{ id: 8, name: '长城', image: '/static/images/pic_logo@3x.png' }
			],
			carList: [],
			// 咨询弹窗相关
			showConsultModal: false,
			phoneNumber: ''
		}
	},
	onLoad() {
		console.log('onLoad 被调用了');
		// 页面加载时调用接口
		this.fetchCarInfoList();
		this.fetchBrandList();
	},
	onShow() {
		console.log('onShow 被调用了');
		// 页面显示时也调用接口
		this.fetchCarInfoList();
	},
	onPageScroll(e) {
		// 当页面滚动超过50rpx时，导航栏吸顶
		this.isNavFixed = e.scrollTop > 50;
		
		// 当页面滚动超过100rpx时，标题和筛选栏吸顶
		this.isHeaderFixed = e.scrollTop > 150;
		
		// 调试信息
		console.log('滚动距离:', e.scrollTop, '导航栏吸顶:', this.isNavFixed, '标题吸顶:', this.isHeaderFixed);
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		
		// 预览图片
		previewImage(imageUrl) {
			if (!imageUrl) {
				uni.showToast({
					title: '暂无图片',
					icon: 'none'
				});
				return;
			}
			
			uni.previewImage({
				urls: [imageUrl],
				current: imageUrl
			});
		},
		
		// 获取车辆信息列表
		fetchCarInfoList() {
			console.log('fetchCarInfoList 方法被调用了');
			
			const params = {
				page: 1,
				rows: 11,
				brandNames: this.getSelectedBrandNames(),
				energyType: this.getSelectedEnergyType(),
				minMonthlyRent: this.getMinMonthlyRent(),
				maxMonthlyRent: this.getMaxMonthlyRent(),
				priceSort: this.getPriceSort(),
				carAgeRanges: '' // 车龄范围，默认为空表示不限车龄
			};
			
			console.log('调用接口参数:', params);
			
			getCarInfoList(params).then(res => {
				console.log('接口返回数据:', res);
				
				// 处理接口返回的数据
				if (res && res.data && res.data.records) {
					this.carList = res.data.records.map(item => {
						// 构建车辆名称，如果brand和model都是"String"，则使用默认名称
						let carName = '';
						if (item.brand === 'String' && item.model === 'String1') {
							carName = '示例车辆 ' + (item.carId || '');
						} else {
							carName = (item.brand || '未知品牌') + ' ' + (item.model || '未知型号');
						}
						
						// 构建规格信息
						const energyType = item.energyType === 'String' ? '纯电动' : (item.energyType || '纯电动');
						const mileage = item.mileage || '400';
						const wheelbase = item.wheelbase || '2665';
						
						return {
							id: item.carId,
							image: item.carImg && item.carImg !== 'String' ? item.carImg : '/static/images/car-placeholder.png',
							name: carName,
							model: item.modelYearDesc && item.modelYearDesc !== 'String' ? item.modelYearDesc : (item.model || '未知型号'),
							specs: `${energyType} | 续航${mileage}km | 轴距${wheelbase}mm`,
							price: item.monthlyRentStart || 0,
							merchantCount: item.merchantCount || 0
						};
					});
					console.log('处理后的车辆列表:', this.carList);
				} else {
					console.log('接口返回数据格式异常:', res);
					this.carList = [];
				}
			}).catch(error => {
				console.error('获取车辆信息失败:', error);
				this.carList = [];
			});
		},
		
		// 获取品牌列表
		fetchBrandList() {
			console.log('fetchBrandList 方法被调用了');
			
			getBrandList().then(res => {
				console.log('品牌列表接口返回数据:', res);
				
				// 处理接口返回的数据
				if (res && res.code === 0 && res.data && Array.isArray(res.data)) {
					this.brandList = res.data.map((item, index) => ({
						id: index + 1, // 生成ID
						name: item.brand,
						image: item.brand_logo_url
					}));
					console.log('处理后的品牌列表:', this.brandList);
				} else {
					console.log('品牌列表接口返回数据格式异常:', res);
					// 保持原有假数据作为默认值
				}
			}).catch(error => {
				console.error('获取品牌列表失败:', error);
				// 保持原有假数据作为默认值
			});
		},
		
		// 获取选中的品牌名称
		getSelectedBrandNames() {
			if (this.selectedBrands.length === 0) {
				return '';
			}
			return this.selectedBrands.map(brandId => {
				const brand = this.brandList.find(b => b.id === brandId);
				return brand ? brand.name : '';
			}).filter(name => name).join(',');
		},
		
		// 获取选中的能源类型
		getSelectedEnergyType() {
			if (this.selectedEnergy === 'electric') {
				return '纯电动';
			} else if (this.selectedEnergy === 'gasoline') {
				return '燃油';
			} else if (this.selectedEnergy === 'hybrid') {
				return '混动';
			} else if (this.selectedEnergy === null) {
				return ''; // 不限时返回空字符串，表示不筛选能源类型
			}
			return '';
		},
		
		// 获取最小月租
		getMinMonthlyRent() {
			if (this.selectedPriceRanges.length === 0) {
				return ''; // 默认为空，表示不限最小月租
			}
			// 根据选中的价格区间计算最小月租
			const minRents = this.selectedPriceRanges.map(rangeId => {
				const range = this.priceRangeList.find(r => r.id === rangeId);
				if (range) {
					if (range.name === '3000以下') return 0;
					if (range.name === '3000-3500') return 3000;
					if (range.name === '3500-4000') return 3500;
					if (range.name === '4000以上') return 4000;
				}
				return 0;
			});
			return Math.min(...minRents).toString();
		},
		
		// 获取最大月租
		getMaxMonthlyRent() {
			if (this.selectedPriceRanges.length === 0) {
				return ''; // 默认为空，表示不限最大月租
			}
			// 根据选中的价格区间计算最大月租
			const maxRents = this.selectedPriceRanges.map(rangeId => {
				const range = this.priceRangeList.find(r => r.id === rangeId);
				if (range) {
					if (range.name === '3000以下') return 3000;
					if (range.name === '3000-3500') return 3500;
					if (range.name === '3500-4000') return 4000;
					if (range.name === '4000以上') return 9999;
				}
				return 9999;
			});
			return Math.max(...maxRents).toString();
		},
		
		// 获取价格排序
		getPriceSort() {
			if (this.selectedPrice === 'lowest') {
				return 'asc';
			} else if (this.selectedPrice === 'highest') {
				return 'desc';
			}
			return 'desc';
		},
		
		// 切换价格下拉菜单显示状态
		togglePriceDropdown() {
			// 如果其他下拉菜单打开，先关闭它们
			if (this.showBrandDropdown) {
				this.showBrandDropdown = false;
			}
			if (this.showEnergyDropdown) {
				this.showEnergyDropdown = false;
			}
			if (this.showPriceRangeDropdown) {
				this.showPriceRangeDropdown = false;
			}
			
			this.showPriceDropdown = !this.showPriceDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showPriceDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择价格排序（单选替换）
		selectPrice(priceType) {
			// 强制重新设置，确保响应式更新
			this.$set(this, 'selectedPrice', priceType);
			this.showPriceDropdown = false;
			// 调用接口
			this.fetchCarInfoList();
			console.log('选中的价格排序:', priceType);
			console.log('当前selectedPrice值:', this.selectedPrice);
		},
		
		// 切换品牌下拉菜单显示状态
		toggleBrandDropdown() {
			// 如果其他下拉菜单打开，先关闭它们
			if (this.showPriceDropdown) {
				this.showPriceDropdown = false;
			}
			if (this.showEnergyDropdown) {
				this.showEnergyDropdown = false;
			}
			if (this.showPriceRangeDropdown) {
				this.showPriceRangeDropdown = false;
			}
			
			this.showBrandDropdown = !this.showBrandDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showBrandDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 切换能源下拉菜单显示状态
		toggleEnergyDropdown() {
			// 如果其他下拉菜单打开，先关闭它们
			if (this.showPriceDropdown) {
				this.showPriceDropdown = false;
			}
			if (this.showBrandDropdown) {
				this.showBrandDropdown = false;
			}
			if (this.showPriceRangeDropdown) {
				this.showPriceRangeDropdown = false;
			}
			
			this.showEnergyDropdown = !this.showEnergyDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showEnergyDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择能源类型（单选替换）
		selectEnergy(energyType) {
			this.selectedEnergy = energyType;
			this.showEnergyDropdown = false;
			// 调用接口
			this.fetchCarInfoList();
			console.log('选中的能源类型:', energyType);
		},
		
		// 切换价格区间下拉菜单显示状态
		togglePriceRangeDropdown() {
			// 如果其他下拉菜单打开，先关闭它们
			if (this.showPriceDropdown) {
				this.showPriceDropdown = false;
			}
			if (this.showBrandDropdown) {
				this.showBrandDropdown = false;
			}
			if (this.showEnergyDropdown) {
				this.showEnergyDropdown = false;
			}
			
			this.showPriceRangeDropdown = !this.showPriceRangeDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showPriceRangeDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择价格区间（单选）
		selectPriceRange(rangeId) {
			// 单选：直接设置为选中的区间
			this.selectedPriceRanges = [rangeId];
		},
		
		// 重置价格区间选择
		resetPriceRanges() {
			this.selectedPriceRanges = [];
		},
		
		// 确定价格区间选择
		confirmPriceRanges() {
			this.showPriceRangeDropdown = false;
			// 调用接口
			this.fetchCarInfoList();
			console.log('选中的价格区间:', this.selectedPriceRanges);
		},
		
		// 选择/取消选择品牌（多选）
		toggleBrand(brandId) {
			const index = this.selectedBrands.indexOf(brandId);
			if (index > -1) {
				this.selectedBrands.splice(index, 1);
			} else {
				this.selectedBrands.push(brandId);
			}
		},
		
		// 重置品牌选择
		resetBrands() {
			this.selectedBrands = [];
		},
		
		// 确定品牌选择
		confirmBrands() {
			this.showBrandDropdown = false;
			// 调用接口
			this.fetchCarInfoList();
			console.log('选中的品牌:', this.selectedBrands);
		},
		
		// 滚动到显示下拉菜单的位置
		scrollToShowDropdown() {
			// 获取当前滚动位置
			uni.createSelectorQuery().selectViewport().scrollOffset((res) => {
				const currentScrollTop = res.scrollTop;
				// 使用代码中定义的吸顶触发高度：150rpx
				const targetScrollTop = 150;
				
				// 如果当前滚动位置小于目标位置，则滚动到目标位置
				if (currentScrollTop < targetScrollTop) {
					uni.pageScrollTo({
						scrollTop: targetScrollTop,
						duration: 300
					});
				}
			}).exec();
		},
		
		// 跳转到车辆租车方案页面
		goToCarRentalPlan(car) {
			uni.navigateTo({
				url: `/pages/driver-life/car-rental-plan?carId=${car.id}&carName=${encodeURIComponent(car.name)}&carImage=${encodeURIComponent(car.image)}&carDescription=${encodeURIComponent(car.model)}&carPrice=${encodeURIComponent(car.price + '元/月起')}`
			});
		},
		
		// 显示咨询弹框
		showConsultPopup() {
			this.showConsultModal = true;
			this.$refs.consultPopup.open();
		},
		
		// 关闭咨询弹框
		closeConsultPopup() {
			this.showConsultModal = false;
			this.$refs.consultPopup.close();
		},
		
		// 清空手机号
		clearPhoneNumber() {
			this.phoneNumber = '';
		},
		
		// 提交咨询
		submitConsult() {
			if (!this.phoneNumber) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.phoneNumber)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 构建提交数据
			const submitData = {
				phoneNumber: this.phoneNumber,
				carModel: '租车咨询' // 通用咨询，不指定具体车型
			};
			
			console.log('提交咨询数据:', submitData);
			
			// 调用接口
			addPotentialClient(submitData).then(res => {
				console.log('咨询提交成功:', res);
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 清空手机号并关闭弹框
				this.phoneNumber = '';
				this.closeConsultPopup();
			}).catch(error => {
				console.error('提交咨询失败:', error);
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				});
			});
		},
		
		// 获取价格排序显示文本
		getPriceSortText() {
			if (this.selectedPrice === 'lowest') {
				return '价格最低';
			} else if (this.selectedPrice === 'highest') {
				return '价格最高';
			}
			return '价格排序';
		},
		
		// 获取品牌显示文本
		getBrandText() {
			if (this.selectedBrands.length > 0) {
				return `品牌(${this.selectedBrands.length})`;
			}
			return '品牌';
		},
		
		// 获取能源显示文本
		getEnergyText() {
			if (this.selectedEnergy === 'electric') {
				return '纯电';
			} else if (this.selectedEnergy === 'gasoline') {
				return '油车';
			} else if (this.selectedEnergy === 'hybrid') {
				return '混动';
			} else if (this.selectedEnergy === null) {
				return '不限';
			}
			return '能源';
		},
		
		// 获取价格区间显示文本
		getPriceRangeText() {
			if (this.selectedPriceRanges.length > 0) {
				const selectedRange = this.priceRangeList.find(range => range.id === this.selectedPriceRanges[0]);
				return selectedRange ? selectedRange.name : '价格';
			}
			return '价格';
		}
	}
}
</script>

<style scoped>
.rent-car-container {
	min-height: 100vh;
	/* height: 100vh; */
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}
.seperator-line {
  width: 2rpx;
  height: 18rpx;
  background: #fff;
	margin: 6rpx 14rpx 0 0;
}
/* 绿色背景区域 */
.green-banner {
	position: relative;
	height: 400rpx;
	overflow: hidden;
}

.banner-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* 导航容器 */
.nav-container {
	position: relative;
	z-index: 10;
	transition: all 0.3s ease;
}

.nav-container-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 200;
}

/* 空白布局区域 */
.banner-spacer {
	height: 60rpx;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
}

.back-icon-wrapper {
	padding: 20rpx;
	margin: -20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.title-icon {
	width: 200rpx;
	height: 40rpx;
}

.tagline-icon {
	width: 180rpx;
	height: 30rpx;
}

/* 横幅文字区域 */
.banner-text-line-1 {
	position: relative;
	z-index: 10;
	padding: 0 30rpx;
	margin-top: 40rpx;
  margin-left:40rpx;
}

.banner-text-line-2 {
	position: relative;
	z-index: 10;
	padding: 0 30rpx;
  margin-left:40rpx;
}

.banner-text-large {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 右侧盾牌图片 */
.shield-icon {
	position: absolute;
	top: 70%;
	right: 30rpx;
	transform: translateY(-50%);
	width: 240rpx;
	z-index: 20;
}

/* 右下角悬浮窗 */
.floating-avatar {
	position: fixed;
	bottom: 250rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	z-index: 250;
}

/* 租车卡片区域 */
.car-cards-section {
	background-color: #fff;
	margin-top: -20rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	flex: 1;
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
}

/* 吸顶区域：标题和筛选栏 */
.sticky-header {
	position: relative;
	z-index: 10;
	background-color: #fff;
	padding: 30rpx 42rpx 0;
	transition: all 0.3s ease;
}

.sticky-header-fixed {
	position: fixed !important;
	top: 120rpx !important; /* 导航栏高度 */
	left: 0 !important;
	right: 0 !important;
	z-index: 200 !important;
	background-color: #fff !important;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: inline-block;
	position: relative;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 0;
	right: 0;
	height: 8rpx;
	background: linear-gradient(to right, #fff, #22c8b9);
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 30rpx;
	padding: 0;
	gap: 40rpx;
}
.sort-icon {
	width: 16rpx;
	height: 32rpx;
	margin-top: 2rpx;
}
.filter-item {
	display: flex;
	align-items: center;
	padding: 10rpx 0;
	position: relative;
}

.filter-text {
	font-size: 24rpx;
	color: #666;
	margin-right: 8rpx;
	font-weight: 600;
}

.filter-text.active-filter {
	color: #05d3b9;
}

.filter-arrow {
	font-size: 14rpx;
	color: #333;
}

/* 价格排序选项 */
.price-options {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.price-options .price-option {
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	color: #333;
	text-align: center;
	background-color: #fff;
}

.price-options .price-option.active {
	color: #05d3b9 !important;
}

/* 能源选择选项 */
.energy-options {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.energy-option {
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	color: #333;
	text-align: center;
	background-color: #fff;
}

.energy-option.active {
	color: #05d3b9 !important;
}

/* 价格区间选择选项 */
.price-range-options {
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.price-range-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 20rpx;
	gap: 20rpx;
}

.price-range-item {
	width: 250rpx;
	height: 62rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	position: relative;
	background-color: #f2f3f7;
	margin-bottom: 20rpx;
	border: 2rpx solid #fff;
}

.price-range-item.price-range-empty {
	background-color: transparent;
	pointer-events: none;
}

.price-range-item.price-range-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
}

.price-range-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
	text-align: center;
}

.price-range-buttons {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	justify-content: flex-start;
}

/* 品牌选择选项 */
.brand-options {
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.brand-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 20rpx;
	gap: 20rpx;
}

.brand-item {
	width: 250rpx;
	height: 80rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	position: relative;
	background-color: #f2f3f7;
	margin-bottom: 20rpx;
	border: 2rpx solid #fff;
}

.brand-item.brand-empty {
	background-color: transparent;
	pointer-events: none;
}

.brand-item.brand-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
}

.brand-image {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.brand-image-placeholder {
	width: 60rpx;
	height: 60rpx;
	background-color: #f0f0f0;
	border-radius: 4rpx;
	margin-right: 20rpx;
}

.brand-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
}

.brand-selected-icon {
	position: absolute;
	top: -8rpx;
	left: -8rpx;
	width: 30rpx;
	height: 30rpx;
	z-index: 10;
}

.brand-buttons {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	justify-content: flex-start;
}

.reset-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
}

.confirm-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #05d3b9;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #fff;
	padding: 0 20rpx;
}

/* 租车卡片列表遮罩效果 */
.car-cards-masked {
	position: relative;
}

.car-cards-masked::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	pointer-events: auto;
}

/* 租车卡片列表 */
.car-cards-list {
	padding: 0 42rpx 30rpx;
	flex: 1;
	background-color: #fff;
}

.car-card {
	background-color: #fdfdfd;
	margin-bottom: 20rpx;
	padding: 30rpx 0;
}

/* 第一行：图片和车辆信息 */
.car-info-row {
	display: flex;
	margin-bottom: 20rpx;
}

.car-image-container {
	width: 30%;
	margin-right: 20rpx;
}

.car-image {
	width: 100%;
	height: 120rpx;
	border-radius: 8rpx;
}

.car-image-placeholder {
	width: 100%;
	height: 120rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.car-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.car-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.car-model {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.car-specs {
	font-size: 24rpx;
	color: #333;
}

/* 分割线 */
.divider {
	height: 1rpx;
	background-color: #eee;
	margin: 20rpx 0;
}

/* 第二行：价格和商家信息 */
.car-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.car-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff5136;
}

.merchant-info {
	font-size: 24rpx;
	color: #999;
}

.placeholder-text {
	font-size: 24rpx;
	color: #999;
}

/* 咨询弹框样式 */
.consult-modal {
	background: linear-gradient(to right, #01DFAA, #13B09F);
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	z-index: 2000;
}

.consult-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10rpx 30rpx 0rpx 30rpx;
}

.consult-info {
	flex: 1;
	margin-right: 20rpx;
	margin-top: 30rpx;
}

.consult-title {
	color: #015B49;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.service-features {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.feature-icon {
	width: 24rpx;
	height: 24rpx;
}

.feature-text {
	color: #015B49;
	font-size: 28rpx;
}

.consult-avatar {
	width: 170rpx;
	height: 170rpx;
	flex-shrink: 0;
}

.consult-form-card {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.phone-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	background-color: #f5f6fc;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
}

.input-label {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
}

.input-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 20rpx;
}

.input-wrapper .uni-icons {
	padding: 10rpx;
	margin: -10rpx;
}

.phone-input {
	flex: 1;
	padding: 0;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
}

.privacy-text {
	color: #666;
	font-size: 24rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.privacy-link {
	color: #01DFAA;
	text-decoration: underline;
}

.consult-submit-button {
	background: linear-gradient(to right, #01DFAA, #05D1BB);
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
	margin-top: 20rpx;
}

.submit-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}

/* 增加 uni-icons 的点击区域 */
.uni-icons {
	padding: 10rpx;
	margin: -10rpx;
	min-width: 40rpx;
	min-height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.movableArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
  z-index: 999;
}
.movableView {
    width: 148rpx;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto; //可以点击
}
.movableView image {
	width: 100rpx;
	height: 100rpx;
}
</style>
